<template>
  <div class="main-container">
    <div style="background-color: #fff; height: 100%" id="BaseInfoSetting">
      <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
        <a-tab-pane title="产品类型" key="2" v-if="permissionStore.hasPermisson('cpjczl.cplx')">
          <div style="height: 100%">
            <ProductInfo></ProductInfo>
          </div>
        </a-tab-pane>
        <a-tab-pane title="客户资料" key="3" v-if="permissionStore.hasPermisson('cpjczl.ppzl')">
          <div style="height: 100%">
            <BrandInfo></BrandInfo>
          </div>
        </a-tab-pane>

        <a-tab-pane
          title="针筒设备维护"
          key="12"
          v-if="permissionStore.hasPermisson('cpjczl.ztsbwh')"
        >
          <div style="height: 100%">
            <NeedleCylinderEquipment></NeedleCylinderEquipment>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, onMounted } from 'vue'
  import emitter from '@/hooks/useEventBus'
  import usePermission from '@/store/modules/permission'

  export default defineComponent({
    name: 'OtherInformation',
    setup() {
      const pageData = reactive({
        tableIndex: '1',
      })
      const permissionStore = usePermission()
      const tabsChange = (e: string | number) => {
        emitter.emit('window-change')
        if (e === '1') {
          emitter.emit('ClothInfo')
        } else if (e === '2') {
          emitter.emit('ProductInfo')
        } else if (e === '3') {
          emitter.emit('BrandInfo')
        } else if (e === '4') {
          emitter.emit('ColorInformation')
        } else if (e === '5') {
          emitter.emit('ClothColorAttribute')
        } else if (e === '6') {
          emitter.emit('Categoriesofyarncount')
        } else if (e === '7') {
          emitter.emit('TypeYarn')
        } else if (e === '8') {
          emitter.emit('Rawmaterialcategory')
        } else if (e === '9') {
          emitter.emit('MaterialGrade')
        } else if (e === '10') {
          emitter.emit('MaterialLossRate')
        } else if (e === '11') {
          emitter.emit('RawMaterialComposition')
        } else if (e === '12') {
          emitter.emit('NeedleCylinderEquipment')
        } else if (e === '13') {
          emitter.emit('GroupPZList')
        } else if (e === '14') {
          emitter.emit('CKPZList')
        } else if (e === '15') {
          emitter.emit('PSJList')
        } else if (e === '16') {
          emitter.emit('GreyClothMachine')
        } else if (e === '17') {
          emitter.emit('NumberNeedles')
        } else if (e === '18') {
          emitter.emit('GermClothInfo')
        } else if (e === '19') {
          emitter.emit('FabricInfo')
        }
      }
      return {
        pageData,
        tabsChange,
        permissionStore,
      }
    },
  })
</script>
<style scoped>
  .main-container {
    height: 100%;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
